(() => {
    new Vue({
        el: '#pie1',
        data: {
            resdata: [], //返回的数据
            Data: [],//各专业数据
            Index: 0,//所选专业的下标
            stu_nameArr: [],
            gpaArr: [],  
            total_ScoreArr: [],
            Array:[]
        },
        created() {
            this.conn()
        },
        mounted() {
            this.getData()
            this.getIndex()
            this.altIndex()
            this.drawEcharts()

        },
        methods: {
            //连接api
            conn() {
                axios
                    .all([
                        axios.get('http://localhost:8001/getScatter/getDashujuScatter'),                       
                        axios.get('http://localhost:8001/getScatter/getJisuanjiyingyongScatter'),   
                        axios.get('http://localhost:8001/getScatter/getRuanjiangongchengScatter'),   
                        axios.get('http://localhost:8001/getScatter/getRuanjianjishuScatter'),   
                        axios.get('http://localhost:8001/getScatter/getWangluogongchengScatter'),   
                        axios.get('http://localhost:8001/getScatter/getWangluojishuScatter'),   
                        axios.get('http://localhost:8001/getScatter/getWulianwangScatter'),   
                        axios.get('http://localhost:8001/getScatter/getXinxiguanliScatter'),   
                    ])
                    .then(response => (
                        this.resdata = response
                        // console.log("response:", this.resdata)
                    ))
            },

            //解析resdata 解析后台数据
            getData() {
                setTimeout(() => {
                    // console.log("getData:", this.resdata)
                    for (i = 0; i < this.resdata.length; i++) {
                        this.Data.push(this.resdata[i].data)
                    }
                    // console.log("Data:", this.Data)
                }, 500)
            },

            //获得点击下标
            getIndex() {
                setTimeout(() => {
                    window.index = 0
                    $('.sell').change(function () {
                        index = this.selectedIndex
                        // console.log("selectedIndex/window.index:", index)
                    })

                }, 500)
            },

            //赋值Index
            altIndex() {
                setTimeout(() => {
                    $('.sell').change(() => {
                        this.Index = index
                        // console.log("赋值Index:", this.Index)
                    })
                }, 1000)
            },

            //分别把相应专业的stu_name取出为列表
            getStu_name() {
                arr = []
                this.stu_nameArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.stu_nameArr.push(arr[i].stu_name)
                    }
                }, 555)
                // console.log("this.stu_nameArr:",this.stu_nameArr)
            },

            //分别把相应专业的avgScore取出为列表
            getGpa() {
                arr = []
                this.gpaArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.gpaArr.push(arr[i].gpa)
                    }
                }, 555)
                // console.log("this.gpaArr:", this.gpaArr)
            },

             //分别把相应专业的avgScore取出为列表
             getTotal_score() {
                arr = []
                this.total_ScoreArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.total_ScoreArr.push(arr[i].total_score)
                    }
                }, 555)
                // console.log("this.total_ScoreArr:", this.total_ScoreArr)
            },

            //=====echarts======
            drawEcharts() {
                setTimeout(() => {

                    this.Array.length=0
                    for (i = 0; i < this.stu_nameArr.length; i++){
                        this.Array.push({
                            "name":this.stu_nameArr[i],
                            "value":[this.gpaArr[i],this.total_ScoreArr[i]]
                        })
                    }

                    myChart = echarts.init(document.getElementById('pie1')),
                    option = {
                        color: ["rgba(15,179,243,0.3)", "rgba(23,216,161,0.3)"],		
                        grid: {
                            top: '15%',                           
                            height: '70%',
                            width: '85%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'none'
                            },
                            formatter: function(params) {
                                return params[0].name + ' : 绩点' +  + params[0].value[0] + ',总成绩' + params[0].value[1];
                            }
                        },
                        xAxis: {
                            
                            axisLine: { //  改变x轴颜色
                                lineStyle: {
                                    color: 'rgba(250,250,250,0.6)',
                                    width: 0.3,
                                }
                                
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: { //  改变x轴字体颜色和大小
                                textStyle: {
                                    color: "rgba(250,250,250,0.6)",
                                    fontSize: 9
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    // color: "rgba(255,255,255,0.2)",
                                    color: "rgba(250,250,250,0.6)",
                                    width: 0.2
                                }
                            },
                        },
                        yAxis: {
                            axisLine: { //  改变y轴颜色
                                lineStyle: {
                                    color: 'rgba(250,250,250,0.6)',
                                    width: 0.3
                                }
                            },
                            axisTick: {
                                show: false,
                            },
                           axisLabel: { //  改变x轴字体颜色和大小
                               textStyle: {
                                   color: "rgba(250,250,250,0.6)",
                                   fontSize: 9
                               },
                           },
                            splitLine: {
                                lineStyle: {
                                    color: "rgba(250,250,250,0.6)",
                                    width: 0.2
                                }
                            },
                        },
                        series: [{
                            itemStyle: {
                                borderColor: "#0FC5F3",
                                borderWidth: 1,
                                shadowColor: "#0FC5F3",
                                shadowBlur: 10
                            },
                            symbolSize: 2,
                            data: this.Array,
                            type: 'scatter'
                        }
                        ]
                    }
                
                    myChart.setOption(option);
                    window.addEventListener("resize", function() {
                        myChart.resize();
                    });
                }, 600)
            }
            //=====echarts======

            

        },
        watch: {
            Index: {
                immediate: true,
                handler(newValue, oldValue) {
                    // console.log("Index被修改了", newValue, oldValue);
                    this.getStu_name()
                    this.getGpa()
                    this.getTotal_score()
                    this.drawEcharts()
                }
            }
           

        }

    })
})();